import { FC, memo, useRef } from 'react';
import useECharts from '@/hooks/useECharts';
import { EChartsOption } from 'echarts';
import { CoinInfoSeriesData } from '@/types/AnalysisInfo';
import styles from './coinInfoChart.module.less';
interface ICoinInfoChartProps {
  legendData: string[] | undefined;
  seriesData: CoinInfoSeriesData[];
}

const CoinInfoChart: FC<ICoinInfoChartProps> = (props) => {
  const { legendData, seriesData } = props;

  const option: EChartsOption = {
    title: {
      text: '主币                算力',
      right: '12%',
      textStyle: {
        color: '#283E59',
        fontSize: 12,
        fontWeight: 'normal',
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      right: '6%',
      itemWidth: 14,
      itemHeight: 8,
      top: 20,
      orient: 'vertical',
      data: legendData,
      formatter: (name) => {
        const space = `          `;
        return `${name}${space}${
          seriesData.find((s) => s.name === name)?.hashFormat
        }`;
      },
    },
    color: [
      '#2B79E5',
      '#FED002',
      '#F64997',
      '#FE9015',
      '#5470c6',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#fc8452',
      '#9a60b4',
      '#ea7ccc',
    ],
    series: [
      {
        // name: '半径模式',
        type: 'pie',
        radius: [20, 55],
        center: ['25%', '50%'],
        roseType: 'radius',

        label: {
          show: false,
        },

        data: seriesData,
      },
    ],
  };
  const coinInfoChartRef = useRef(null);
  useECharts(coinInfoChartRef, option, !!seriesData || !!legendData);

  return (
    <div className={styles.coinInfoWrap}>
      <div
        ref={coinInfoChartRef}
        style={{ width: '100%', height: '147px' }}
      ></div>
    </div>
  );
};

export default memo(CoinInfoChart);
